<template>
	<div>
		<div class="search">
			<div class="search_in" @click="gosearch">
				<div>
					<img src="../../assets/search.png" alt="">
					<p>请输入您需要搜索的关键词</p>
				</div>
				<button>搜索</button>
			</div>
		</div>
		<div class="inform">
			<img class="inform_icon" src="../../assets/home/inform-icon.png" alt="">
			<li class="inform_item" v-for="(inform,idx) in dataList.BulletinList">
				<div style="display: flex;align-items: center;"  v-if="inform.status">
					<el-icon color="#11918E">
						<ArrowRight />
					</el-icon>
					<p style="width: 300px;">{{inform.bulletinContent}}</p>
				</div>
				<span v-if="inform.status">{{inform.createdTime.slice(0,10)}}</span>
			</li>
		</div>
		<div class="home_item">
			<titleBox :title="'科技培训'">
				<template v-slot:more>
					<li class="more_r" @click="goMore('/science')">
						<p>查看更多</p>
						<el-icon>
							<ArrowRight />
						</el-icon>
					</li>
				</template>
			</titleBox>
			<div class="science_box">
				<!-- <science v-if="dataList.science.length" v-for="(science,i) in dataList.science" :type="2" :status="2" :list="science"></science> -->
				<div class="sclence" v-if="dataList.science.length" v-for="(science,i) in dataList.science">
					<img :src="'http:'+science.photoUrl" alt="">
					<div class="sclence_r">
						<p class="snp1">{{science.trainingName}}</p>
						<!-- <span></span> -->
						<span>培训时间：{{science.trainingStartTime}} - {{science.trainingEndTime}}</span>
						<button v-if="science.enrollStatus == 'notEnroll' || science.enrollStatus == 'failed'" class="btn1" @click.stop="goseDetail('baoming',science.trainingUuid)">报名</button>
						<button v-if="science.enrollStatus == 'learning'||science.enrollStatus == 'enroll'" class="btn2" @click.stop="goseDetail('jx',science.trainingUuid)">继续学习</button>
						<button v-if="science.enrollStatus == 'overEnroll'" class="btn3">已结束</button>
					</div>
				</div>
					
				<div class="errorIcon" v-if="!dataList.science.length">
					<img src="../../assets/error.png" alt="">
					<p>暂无数据</p>
				</div>
			</div>
		</div>
		<div class="home_item">
			<titleBox :title="'三农课堂'">
				<template v-slot:more>
					<li class="more_r" @click="goMore('/classRoom')">
						<p>查看更多</p>
						<el-icon>
							<ArrowRight />
						</el-icon>
					</li>
				</template>
			</titleBox>
			<div class="classroom_box">
				<!-- <classRoom v-if="dataList.classRoomList.length" v-for="classRoom in dataList.classRoomList" :key="classRoom.id" :list="classRoom"></classRoom> -->
				<div v-if="dataList.classRoomList.length" v-for="classRoom in dataList.classRoomList" @click="goDetail(classRoom.classUuid)" class="classroom">
					<img :src="classRoom.coverImage" alt="">
					<p class="snp1">{{classRoom.className}}</p>
					<li>
						<span>主讲人：{{classRoom.classManager}}</span>
						<span>{{classRoom.classStatus}}人学习</span>
					</li>
				</div>
				
				
				
				<div class="errorIcon" v-if="!dataList.classRoomList.length">
					<img src="../../assets/error.png" alt="">
					<p>暂无数据</p>
				</div>
			</div>
		</div>
		<div class="home_item">
			<titleBox :title="'专家智库'">
				<template v-slot:more>
					<li class="more_r" @click="goMore('/thinkTank')">
						<p>查看更多</p>
						<el-icon>
							<ArrowRight />
						</el-icon>
					</li>
				</template>
			</titleBox>
			<div class="thinkTank_box">
				<thinkTank v-if="dataList.thinkTank.length" v-for="(think,i) in dataList.thinkTank" :list="think"></thinkTank>
				<div class="errorIcon" v-if="!dataList.thinkTank.length">
					<img src="../../assets/error.png" alt="">
					<p>暂无数据</p>
				</div>
			</div>
		</div>
		<div class="home_item" @click="goEssay">
			<titleBox :title="'农技问答'">
				<template v-slot:more>
					<li class="more_r" @click="goMore('/essay')">
						<p>查看更多</p>
						<el-icon>
							<ArrowRight />
						</el-icon>
					</li>
				</template>
			</titleBox>
			<div class="thinkTank_box">
				<!-- <essay v-if="dataList.essayList.length" :type="'home'" v-for="essay in dataList.essayList" :list="essay"></essay> -->
				
				<div class="essayList" v-if="dataList.essayList.length" v-for="essay in dataList.essayList">
					<li>
						<img src="@/assets/home/ask.png" alt="">
						<p>{{essay.question}}</p>
					</li>
					<li>
						<img src="@/assets/home//reply.png" alt="">
						<span class="snp2">
							{{essay.answer}}
						</span>
					</li>
				</div>
				
				<div class="errorIcon" v-if="!dataList.essayList.length">
					<img src="../../assets/error.png" alt="">
					<p>暂无数据</p>
				</div>
			</div>
		</div>
		<div class="home_item">
			<titleBox :title="'科技成果'">
				<template v-slot:more>
					<li class="more_r" @click="goMore('/popularize')">
						<p>查看更多</p>
						<el-icon>
							<ArrowRight />
						</el-icon>
					</li>
				</template>
			</titleBox>
			<!-- @click="goMore('/popularize')" -->
			<div class="thinkTank_box" >
				<popularize :type="'home'" :list="dataList.popularize1" :status="'first'" @lookDetale='lookDetales'>
					<template v-slot:title>
						<li class="popularize_title">
							<span></span>
							<p>成果推介</p>
						</li>
					</template>
				</popularize>
				<popularize :type="'home'" :list="dataList.popularize2" :status="'second'" @lookDetale='lookDetales'>
					<template v-slot:title>
						<li class="popularize_title">
							<span></span>
							<p>转化公示</p>
						</li>
					</template>
				</popularize>
			</div>
		</div>

		<div class="study" v-if="dataList.isstudy">
			<p @click="closeStudy">✖</p>
			<img class="study_back" src="../../assets/home/study.png" alt="">
			<img class="study_text" src="../../assets/home/study1.png" alt="">
			<img class="study_icon" src="../../assets/home/study2.png" alt="">
			<button @click="gostudy">进入学习</button>
		</div>
		<div class="youqing">
			<div>
				<span>友情链接：</span>
				<p v-for="(p,idx) in dataList.PortalUrl" @click="goUrl(p.portalUrl)">{{p.portalTitle}}</p>
			</div>
		</div>
		<div class="zhinan">
			<img src="../../assets/zhinan.png" alt="">
		</div>
	</div>
</template>

<script setup>
	import {
		unLoginRecentTraining,
		searchSpecialistInfo,
		searchHotOnlineClass,
		searchQuestionPage,
		searchAchievement,
		searchBulletin,
		wxWeblogin,
		getWxMiniUserByUuid,
		getWxMiniUserByUnionid,
		listPortalUrl
	} from "../../api/home.js";
	import popularize from '../../components/popularize.vue'
	import essay from '../../components/essay.vue'
	import titleBox from '../../components/titleBox.vue'
	import classRoom from '../../components/classRoom.vue'
	import thinkTank from '../../components/thinkTank.vue'
	import science from '../../components/science.vue'
	import {
		ArrowRight
	} from '@element-plus/icons-vue'
	import {
		reactive,
		onBeforeMount
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		science: [],
		classRoomList: [],
		thinkTank: [],
		essayList: [],
		popularize1: [],
		popularize2: [],
		BulletinList: [],
		isstudy:true
	})
	onBeforeMount(() => {
		var Homecode = router.currentRoute._value.query.code
		if (Homecode) {
			loginF(Homecode)
		}
		getunLoginRecentTraining()
		getsearchHotOnlineClass()
		getsearchSpecialistInfo()
		getsearchQuestionPage()
		getsearchAchievement('cgtj')
		getsearchAchievement('zhgs')
		getsearchBulletin()
		getlistPortalUrl()
	})
	const closeStudy = () => {
		dataList.isstudy = false
	}
	const loginF = (code) => {
		var data = {
			params: {
				code: code
			}
		}
		wxWeblogin(data).then(res => {
			if (res.code == 200) {
				getuser(res.data.wxUserUuid)
				localStorage.setItem('userUuid', res.data.wxUserUuid)
				localStorage.setItem('userinfos', JSON.stringify(res.data))
				dataList.userUuid = localStorage.getItem('userUuid')
			}
	
		})
	}
	const getuser = (code) => {
		var data = {
			params: code
		}
		getWxMiniUserByUuid(data).then(res => {
			dataList.userUuid = res.data.wxUserUuid
			localStorage.setItem('userinfo', JSON.stringify(res.data))
			localStorage.setItem('userUuid', res.data.wxUserUuid)
			setTimeout(function(){
				router.go(0)
			},1000)
		})
		getWxMiniUserByUnionid(data).then(res=> {
			localStorage.setItem('userinfo22', JSON.stringify(res.data))
		})
	}
	const gosearch = () => {
		router.push({
			path:'/search'
		})
	}
	const goseDetail = (name,id) => {
		if(name == 'baoming'){
			router.push({
				path:'/apply',
				query:{type:1,id:id}
			})
		}else if(name == 'jx'){
			router.push({
				path:'/apply',
				query:{type:2,id:id}
			})
		}else{
			
		}
	}
	const goDetail = (id)=> {
		router.push({
			path:'/classDetail',
			query:{id}
		})
	}
	
	const searchBulletinF = () => {
		searchBulletin().then(res => {
			console.log(res)
		})
	}
	const goEssay = () => {
		router.push('/essay')
	}
	const goMore = (url) => {
		router.push(url)
	}

	// 培训项目
	const getunLoginRecentTraining = () => {
		var data = {
			page: {
				pageSize: 4
			},
			params: {
				wxUserUuid: localStorage.getItem('userUuid')
			}
		}
		unLoginRecentTraining(data).then(res => {
			dataList.science = res.data.list
		})
	}

	// 三农课堂

	const getsearchHotOnlineClass = () => {
		var data = {
			page: {
				pageSize: 8
			},
			params: {
				classStatus: 1
			}
		}
		searchHotOnlineClass(data).then(res => {
			var list = []
			for(var key in res.data.list){
				list.push(res.data.list[key])
			}
			dataList.classRoomList = list
		})
	}

	// 专家智库
	const getsearchSpecialistInfo = () => {
		var data = {
			page: {
				pageNum: 1,
				pageSize: 6
			},
			params: {
				specialistName: ""
			},
		}
		searchSpecialistInfo(data).then(res => {
			dataList.thinkTank = res.data.list
		})
	}

	// 农技问答
	const getsearchQuestionPage = () => {
		var data = {
			page: {
				pageNum: 1
			},
			params: {
				question: ""
			}
		}
		searchQuestionPage(data).then(res => {
			
			// dataList.essayList = res.data.list
			var list = []
			for(var key in res.data.list){
				list.push(res.data.list[key])
			}
			dataList.essayList = list
		})

	}
	// 科技成果-成果推广
	// app/achievement/searchAchievement
	const getsearchAchievement = (type) => {
		var data = {
			page: {
				pageNum: 1
			},
			params: {
				category: type,
				projectName: ""
			}
		}
		searchAchievement(data).then(res => {
			if (type == 'zhgs') {
				var list = []
				res.data.list.forEach((val,idx)=> {
					if(idx<=5){
						list.push(val)
					}
				})
				dataList.popularize2 = list
				
			} else {
				var list1 = []
				res.data.list.forEach((val,idx)=> {
					if(idx<=5){
						list1.push(val)
					}
				})
				dataList.popularize1 = list1
			}
		})

	}

	// 公告
	// 
	const getsearchBulletin = (type) => {
		var data = {
			page: {
				pageSize: 2,
				pageNum:1
			},
			params: {}
		}
		searchBulletin(data).then(res => {
			dataList.BulletinList = res.data.list
		})

	}
	const gostudy = ()=> {
		router.push('/study')
	}
	// 科技成果
	const lookDetales = (res)=> {
		// router.push(url)
		//  @click="goMore('/popularize')"
		// console.log(res,"555555")
		router.push({
			path:'/popularize',
			query:{
				id:res.id,
				status:res.status
			}
		})
	}
	
	// 底部友情链接
	const getlistPortalUrl = () => {
		listPortalUrl().then(res=> {
			dataList.PortalUrl = res.data
			console.log(res,"777777777777")
		})
	}
	const goUrl = (url) => {
		window.open(url)
	}
</script>
<style lang="scss" scoped>
	// 通知公告
	.inform {
		background-color: #FFFFFF;
		width: 1200px;
		height: 79px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		margin: 30px auto;
		padding: 20px 30px;

		img {
			width: 111px;
			// height: 39px;
		}

		&_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 474px;
			padding-left: 40px;
			margin-left: 40px;
			border-left: 1px solid #11918E;

			p {
				margin-left: 10px;
			}
		}

		&_item:last-child {
			border-left: none;
		}
	}

	.more_r {
		display: flex;
		align-items: center;

		p {
			font-size: 18px;
			font-weight: 400;
			color: #666666;
			margin-right: 5px;
		}
	}

	.home_item {
		width: 1200px;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-bottom: 30px;
	}

	.science_box,
	.thinkTank_box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.essayList{
			width: 550px;
			background: #FFFFFF;
			border-radius: 10px 10px 10px 10px;
			opacity: 1;
			border: 1px solid rgba(17,145,142,0.1);
			padding: 15px;
			margin-top: 30px;
			li{
				display: flex;
				img{
					width: 30px;
					height: 30px;
					margin-right: 12px;
				}
			}
			li:last-child{
				margin-top: 16px;
			}
		}
		
		.sclence{
			display: flex;
			margin-top: 30px;
			width: 555px;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid rgba(17,145,142,0.1);
			padding: 15px;
			img{
				width: 200px;
				height: 150px;
				margin-right: 15px;
			}
			&_r{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				button{
					width: 92px;
					height: 33px;
					border-radius: 5px;
					font-size: 16px;
					font-weight: 600;
					color: #FFFFFF;
				}
				.btn1{
					background-color: #11918E;
				}
				.btn2{
					background-color: #69A800;
				}
				.btn3{
					background-color: #EDEDED;
					color: #B3B3B3;
				}
				// p{
				// 	width: 340px;
				// }
				span{
					
				}
			}
		}
	}

	.classroom_box {
		display: flex;
		flex-wrap: wrap;
		.classroom{
			width: 262px;
			height: 264px;
			background: #FFFFFF;
			overflow: hidden;
			border-radius: 10px;
			border: 1px solid rgba(17,145,142,0.1);
			margin-top: 30px;
			margin-right: 30px;
			img{
				width: 262px;
				height: 174px;
			}
			p{
				width: 230px;
				margin: 15px;
			}
			li{
				width: 230px;
				margin: 15px;	
				display: flex;
				justify-content: space-between;
			}
		}
		.classroom:nth-of-type(4n+0) {margin-right: 0;}
		.isuser{
			width: 282px;
			height: 276px;
			margin-right: 30px;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid rgba(17,145,142,0.1);
			margin-top: 30px;
			img{
				width: 280px;
				height: 186px;
			}
			p{
				width: 230px;
				margin: 15px;
			}
			li{
				width: 230px;
				margin: 15px;	
				display: flex;
				justify-content: space-between;
			}
		}
		.isuser:nth-of-type(3n+0) {margin-right: 0;}
	}

	.popularize_title {
		display: flex;
		align-items: center;

		p {
			font-size: 24px;
			font-weight: 600;
			color: #11918E;
			margin-left: 10px;
		}

		span {
			width: 2px;
			height: 20px;
			background: #11918E;
			display: block;
			margin-top: 4px;
		}
	}

	.study {
		position: fixed;
		top: 601px;
		right: 104px;
		width: 180px;
		height: 240px;
		display: flex;
		flex-direction: column;
		align-items: center;

		&_back {
			position: absolute;
			width: 180px;
			height: 240px;
		}

		&_text {
			position: relative;
			z-index: 1;
			width: 100px;
			margin-top: 20px;
		}

		&_icon {
			position: relative;
			z-index: 1;
			width: 100px;
			margin: 12px 0;
		}

		button {
			position: relative;
			z-index: 1;
			width: 124px;
			height: 37px;
			background: #FFFFFF;
			border-radius: 100px;
			font-size: 16px;
			font-weight: 600;
			color: #1CABD9;
		}

		p {
			position: absolute;
			z-index: 1;
			top: 4px;
			right: 4px;
			color: #FFFFFF;
			font-size: 12px;
			font-weight: 400;
			border: 1px solid #FFFFFF;
			border-radius: 50%;
			width: 16px;
			height: 16px;
			line-height: 14px;
			text-align: center;
			cursor: pointer;
		}
	}
	.search{
		width: 1200px;
		height: 81px;
		background: #FFFFFF;
		border-radius: 10px 10px 10px 10px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		.search_in {
			width: 1140px;
			height: 51px;
			background: #FFFFFF;
			border-radius: 10px 10px 10px 10px;
			border: 1px solid rgba(17,145,142,0.5);
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
			div{
				display: flex;
				align-items: center;
				img{
					width: 31px;
					height: 31px;
					margin: 0 20px;
				}
			}
			button{
				width: 123px;
				height: 51px;
				background: #11918E;
				border-radius: 10px 10px 10px 10px;
				font-size: 20px;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	.youqing{
		width: 100%;
		height: 45px;
		background: #00693E;
		div{
			width: 1200px;
			margin: 0 auto;
			height: 45px;
			display: flex;
			align-items: center;
			p,span{
				font-size: 16px;
				font-weight: 400;
				color: #FFFFFF;
				
			}
			p{
				padding-right: 20px;
				cursor: pointer;
			}
		}
	}
	.zhinan{
		width: 84px;
		height: 172px;
		position: fixed;
		top: 360px;
		right: 140px;
	}
</style>